<!DOCTYPE html>  
<html>
    <head>  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>GeoInBaidu</title>  
    
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=mLPEkZkDD6ZPUA9peysDcXPXkLYebGXG">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
        </script>
        <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    </head>  
 
    <body>  
    <h2>lyns eGeoInBaidu</h2>
    <div id="mapcontainer" style="width: 1200px;height:800px;"></div> 
    <p>lyns eGeoInBaidu</p>
        <script type="text/javascript"> 
            var map = new BMap.Map("mapcontainer");
            // 创建地图实例  
            map.centerAndZoom(new BMap.Point(112.506612,32.85454),5); 
            // 初始化地图，设置中心点坐标和地图级别  
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            
            map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
            //添加控件 右上角， 平移&缩放按钮
            map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_RIGHT})); //比例尺

            // 第一种地图点形式，默认的红点
            
            var subwaycity1 = new BMap.Marker(new BMap.Point(116.403909,39.915156),{title:"北京市"});// 创建标注 
            map.addOverlay(subwaycity1);
            
            subwaycity1.addEventListener("click", function(){//监听标注事件   
                var infoWindow = new BMap.InfoWindow("cd<br>北京市 <br>已开通地铁",{    
                     width : 250, height: 160, title : "北京市"}); // 创建信息窗口对象
                map.openInfoWindow(infoWindow, new BMap.Point(116.403909,39.915156));  // 打开信息窗口  
           });
            var subwaycity2 = new BMap.Marker(new BMap.Point(117.205496,39.103525),{title:"天津市"});// 创建标注 
            map.addOverlay(subwaycity2);
            
            subwaycity2.addEventListener("click", function(){//监听标注事件   
                var infoWindow = new BMap.InfoWindow("cd<br>天津市 <br>已开通地铁",{    
                     width : 250, height: 160, title : "天津市"}); // 创建信息窗口对象
                map.openInfoWindow(infoWindow, new BMap.Point(117.205496,39.103525));  // 打开信息窗口  
           });
           
		   // 第二种形式，定制化了标记点，BMap.Icon，其他个性化需求看官方文档
		   //待开
			var subwaynextc1 = new BMap.Marker(new BMap.Point(120.900882512357,31.9858243546117),{title:"南通市",icon:new BMap.Icon("./w_shix_bmap_marker.png",new BMap.Size(36,30))});// 创建标注 
            map.addOverlay(subwaynextc1);
            subwaynextc1.addEventListener("click", function(){//监听标注事件   
                var infoWindow = new BMap.InfoWindow("cd<br>南通市 <br>将要开通地铁",{    
                     width : 250, height: 160, title : "南通市"}); // 创建信息窗口对象
                map.openInfoWindow(infoWindow, new BMap.Point(120.900882512357,31.9858243546117));  // 打开信息窗口  
           });
            

        </script>  
    <!--
	数据部分可以用以下Python代码读Excel直接生成js文件，然后调用js文件
	for i,c in cdf.iterrows():
    ct=c['city'] #.replace('市','')
    print('''
            var subwaynextc{0} = new BMap.Marker(new BMap.Point({1},{2}),{3}title:"{4}",icon:new BMap.Icon("./w_shix_bmap_marker.png",new BMap.Size(36,30)){5});// 创建标注 
            map.addOverlay(subwaynextc{0});
            
            subwaynextc{0}.addEventListener("click", function(){3}//监听标注事件   
                var infoWindow = new BMap.InfoWindow("cd<br>{4} <br>将要开通地铁",{3}    
                     width : 250, height: 160, title : "{4}"{5}); // 创建信息窗口对象
                map.openInfoWindow(infoWindow, new BMap.Point({1},{2}));  // 打开信息窗口  
           {5});\n
            '''.format(i+1,c['bj'],c['bw'],'{',ct,'}'))
	-->

    </body>  
</html>